import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import { getCameraItemDeduct, filterMonth } from '../lib/publicMethod'
import { ICameraData } from '../interface/ICameraData'

interface IProps {
  data: ICameraData[]
}
export default function CameraProportionChange(props: IProps) {
  const data = props.data
  const el = useRef<HTMLDivElement | null>(null)
  const ec = useRef<echarts.ECharts | null>(null)
  useEffect(() => {
    ec.current = echarts.init(el.current as HTMLDivElement)
  }, [])
  useEffect(() => {
    //扣分项变化趋势
    const itemDeductAveByMonth = [
      getCameraItemDeduct(filterMonth(data, '二月')).ave,
      getCameraItemDeduct(filterMonth(data, '三月')).ave,
      getCameraItemDeduct(filterMonth(data, '四月')).ave,
      getCameraItemDeduct(filterMonth(data, '五月')).ave,
      getCameraItemDeduct(filterMonth(data, '六月')).ave,
      getCameraItemDeduct(filterMonth(data, '七月')).ave,
    ]
    const teaArr: number[] = []
    const shareArr: number[] = []
    const studentArr: number[] = []
    for (let i = 0; i < itemDeductAveByMonth.length; i++) {
      teaArr.push(itemDeductAveByMonth[i][0])
      shareArr.push(itemDeductAveByMonth[i][1])
      studentArr.push(itemDeductAveByMonth[i][2])
    }
    (ec.current as echarts.ECharts).setOption({
      legend: {
        data: [
          '讲师在班状态',
          '课前分享情况',
          '学员上课状态'
        ]
      },
      xAxis: {
        data: ["二月", "三月", "四月", "五月", "六月", "七月"]
      },
      yAxis: {},
      series: [
        {
          name: '讲师在班状态',
          type: 'bar',
          data: teaArr,
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          }
        },
        {
          name: '课前分享情况',
          type: 'bar',
          data: shareArr,
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          }
        },
        {
          name: '学员上课状态',
          type: 'bar',
          data: studentArr,
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          }
        }
      ]
    })
  }, [data])
  return (
    <div className="show" ref={el}></div>
  )
}
